<template>
  <div>
    <a-form class="headerSerch" layout="inline">
      <a-row :gutter="24">
        <a-col :md="6" :sm="24">
          <a-button style="float: left; margin-top: 10px" @click="showModal()" type="primary">新增</a-button>
        </a-col>
      </a-row>
    </a-form>
    <a-table
      rowKey="id"
      :columns="columns"
      :data-source="navRoleList"
      class="components-table-demo-nested"
      :pagination="false"
    >
      <template slot="action_list" slot-scope="text">
        <a-tag v-for="item in text" :key="item.id" :color="getActionColor(item.name)">
          {{ item.describe }}
        </a-tag>
      </template>
      <a slot="operation" slot-scope="text,record">
        <a-button @click="showModal(record)" type="primary">编辑</a-button>
        <a-popconfirm
          title="Are you sure delete this record?"
          ok-text="确定"
          cancel-text="取消"
          @confirm="removeRoleNav(record)"
        >
          <a-button type="danger">删除</a-button>
        </a-popconfirm>
      </a>
    </a-table>
    <a-pagination
      v-model="queryParams.page"
      :page-size-options="pageSizeOptions"
      :total="total"
      show-size-changer
      :page-size="queryParams.limit"
      class="pagination"
      @showSizeChange="onShowSizeChange"
      @change="changePage"
      :show-total="(total, range) => `共${total}条`"
    >
      <template slot="buildOptionText" slot-scope="props">
        <span>{{ props.value }}条/页</span>
      </template>
    </a-pagination>

    <AddModal
      :visible="visible"
      :roleOptionList="roleOptionList"
      :navOptionList="navOptionList"
      :actionOptionList="actionOptionList"
      :current="current"
      @ok="handleOk"
      @cancel="handleCancel"
    />
  </div>
</template>

<script>
import { getNavRoleList, getRoleList, getMenuList, getActionList, addNavRole, updateNavRole } from '@/api/manage'
import { isNotEmptyList } from '@/utils/util'
import request from '@/utils/request'
import AddModal from './addModal.vue'
import { mapState } from 'vuex'

export default {
  components: {
    AddModal
  },
  computed: {
    ...mapState({
      pageSizeOptions: state => state.user.pageSizeOptions
    })
  },
  data () {
    return {
      columns: [
        { title: 'id', dataIndex: 'id', key: 'id' },
        { title: '角色名', dataIndex: 'role', key: 'role', customRender: (text) => text.describe },
        { title: '页面导航', dataIndex: 'nav', key: 'nav', customRender: (text) => text.name },
        { title: '导航名称', dataIndex: 'nav', key: 'nav_name_cn', customRender: (text) => text.nameCn },
        {
          title: '操作权限',
          dataIndex: 'action_list',
          key: 'action_list',
          scopedSlots: { customRender: 'action_list' }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          key: 'operation',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      navRoleList: [],
      roleOptionList: [],
      navOptionList: [],
      actionOptionList: [],
      loading: false,
      visible: false,
      queryParams: {
        page: 1,
        limit: 10
      },
      total: 0,
      current: undefined
    }
  },

  mounted () {
    this.getNavRoleList()
    this.getRoleOptionList()
    this.getNavOptionList()
    this.getActionOptionList()
  },
  methods: {
    async getNavRoleList () {
      this.loading = true
      const res = await getNavRoleList(this.queryParams)
      if (isNotEmptyList(res.data.data)) {
        this.navRoleList = res.data.data
        this.total = res.data.total || 0
      }
      this.loading = false
    },

    async getRoleOptionList () {
      const res = await getRoleList({ page: 1, limit: 999 })
      if (isNotEmptyList(res.data.data)) {
        res.data.data.map((item) => {
          this.roleOptionList.push({
            value: item.id,
            label: item.name
          })
        })
      }
    },

    async getNavOptionList () {
      const res = await getMenuList({ page: 1, limit: 999 })
      if (isNotEmptyList(res.data.data)) {
        res.data.data.map((item) => {
          this.navOptionList.push({
            value: item.id,
            label: item.name
          })
        })
      }
    },
    async getActionOptionList () {
      const res = await getActionList({ page: 1, limit: 999 })
      if (isNotEmptyList(res.data.data)) {
        res.data.data.map((item) => {
          this.actionOptionList.push({
            value: item.id,
            label: item.describe
          })
        })
      }
    },

    async removeRoleNav (record) {
      const response = await request.delete(`menu/nav_role/${record.id}`)
      if (response.code === 2000) {
        this.$message.success('删除成功')
        this.getNavRoleList()
      }
    },

    async saveRoleNav (values) {
      let res
      if (values.id) {
        // 编辑
        res = await updateNavRole(values)
      } else {
        // 新增
        res = await addNavRole(values)
      }
      if (res) {
        this.$message.success(values.id ? '修改成功' : '添加成功')
        this.visible = false
        this.getNavRoleList()
      }
    },
    changePage (current, pageSize) {
      this.queryParams.page = current
      this.getNavRoleList()
    },

    onShowSizeChange (current, pageSize) {
      this.queryParams.pageSize = pageSize
      this.getNavRoleList()
    },
    showModal (record) {
      if (record) {
        this.current = record
      }
      this.visible = true
    },
    handleOk (values) {
      this.saveRoleNav(values)
    },
    handleCancel () {
      this.visible = false
      this.current = undefined
    },
    getActionColor (name) {
      const colorMap = {
        'add': 'green',
        'delete': 'red',
        'update': 'blue',
        'query': 'orange'
      }
      return colorMap[name] || 'default'
    }
  }
}
</script>

<style>
.pagination {
  float: right;
  padding: 40px;
}
</style>
